/* 在线用户页面 */
<template>
  <zero-container v-loading="dataListLoading"
                  type="zero">
    <!-- 表格操作工具-start -->
    <div slot="tool">
      <el-form :inline="true"
               :model="searchForm"
               style="float: left;">
        <el-form-item label="用户账号">
          <el-input v-model="searchForm.name"
                    clearable
                    size="small" />
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="searchForm.nickName"
                    clearable
                    size="small" />
        </el-form-item>
        <el-form-item>
          <el-button type="success"
                     icon="el-icon-search"
                     @click="searchSubmit()"
                     round
                     size="small">搜索</el-button>
          <el-button icon="el-icon-refresh"
                     type="warning"
                     @click="searchResetForm()"
                     round
                     size="small">重置</el-button>
        </el-form-item>
      </el-form>
      <el-button-group style="float: right;">
        <el-dropdown trigger="click"
                     :hide-on-click="false">
          <el-button title="列"
                     icon="fa fa-th"
                     class="zero-column-dropdown"
                     size="small" />
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item key="all"
                              label="all">
              <el-checkbox key="all"
                           v-model="cloumn_all_checked"
                           v-on:click.stop.native
                           label="all"
                           @change="cloumnAllChecked">全选</el-checkbox>
            </el-dropdown-item>
            <hr />
            <el-checkbox-group v-model="checkedTableColumns">
              <el-dropdown-item v-for="(column,i) in showColumns"
                                :key="i"
                                :label="i">
                <el-checkbox :key="i"
                             :label="i">{{ column.label }}</el-checkbox>
              </el-dropdown-item>
            </el-checkbox-group>
          </el-dropdown-menu>
        </el-dropdown>
      </el-button-group>
    </div>
    <!-- 表格操作工具-end -->
    <div slot="main"
         style="height:100%;">
      <el-table :ref="ref"
                border
                height="100%"
                :data="dataList"
                @selection-change="dataListSelectionChangeHandle"
                @sort-change="dataListSortChangeHandle"
                style="width: 100%">
        <el-table-column type="selection"
                         header-align="center"
                         align="center"
                         width="50" />
        <el-table-column v-if="showColumns.name.show"
                         prop="name"
                         label="用户账号"
                         header-align="center"
                         align="center" />
        <el-table-column v-if="showColumns.nickName.show"
                         prop="nickName"
                         label="昵称"
                         header-align="center"
                         align="center" />
        <el-table-column v-if="showColumns.mobile.show"
                         prop="mobile"
                         label="手机号码"
                         header-align="center"
                         align="center" />
        <el-table-column v-if="showColumns.loginTime.show"
                         prop="loginTime"
                         label="登录时间"
                         sortable="custom"
                         header-align="center"
                         align="center"
                         width="180"
                         :formatter="dateFormat" />
        <el-table-column v-if="showColumns.useTime.show"
                         prop="loginTime"
                         label="在线时长(分)"
                         sortable="custom"
                         header-align="center"
                         align="center"
                         width="180"
                         :formatter="useTimeFormat" />
        <el-table-column v-if="$hasPermission(forcedOfflineUrl)"
                         label="操作"
                         align="center"
                         width="180">
          <template slot-scope="scope">
            <el-button v-if="$hasPermission(forcedOfflineUrl)"
                       type="danger"
                       @click="forcedOffline(scope.row.name)"
                       size="mini">强制下线</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 页脚-start -->
    <div slot="footer">
      <vxe-pager border
                 align="left"
                 :current-page="page"
                 :page-size="limit"
                 :total="total"
                 :layouts="layouts"
                 @page-change="handlePageChange" />
    </div>
    <!-- 页脚-end -->
  </zero-container>
</template>

<script>
import mixinViewModule from '@/mixins/view-module' // 分页相关js
import dayjs from 'dayjs'
export default {
  name: 'SysUserOnline',
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListUrl: '/sysUser/onlineUserPage',
        exportUrl: '/sysUser/export'
      },
      forcedOfflineUrl: '/sysUser/forcedOffline',
      showColumns: {
        name: { label: '用户账号', show: true },
        nickName: { label: '昵称', show: true },
        mobile: { label: '手机号码', show: true },
        loginTime: { label: '登录时间', show: true },
        useTime: { label: '在线时长', show: true }
      }
    }
  },
  methods: {
    forcedOffline (name) {
      const config = {
        url: this.forcedOfflineUrl,
        method: 'get',
        params: { name: name }
      }
      this.$confirm('确定强制下线 [' + name + '] 吗?', '提示', {
        cancelButtonClass: 'btn-custom-cancel',
        type: 'warning',
        closeOnClickModal: false
      }).then(() => {
        this.$axios(config)
          .then((res) => {
            this.$message.success(res.msg)
            this.getDataList()
          })
          .catch(() => {
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    useTimeFormat (row) {
      // 总秒数
      const date3 = (dayjs().unix() - row.loginTime) * 1000
      // 计算出相差天数
      var days = Math.floor(date3 / (24 * 3600 * 1000))

      // 计算出小时数

      var leave1 = date3 % (24 * 3600 * 1000) // 计算天数后剩余的毫秒数
      var hours = Math.floor(leave1 / (3600 * 1000))
      // 计算相差分钟数
      var leave2 = leave1 % (3600 * 1000) // 计算小时数后剩余的毫秒数
      var minutes = Math.floor(leave2 / (60 * 1000))
      // 计算相差秒数
      var leave3 = leave2 % (60 * 1000) // 计算分钟数后剩余的毫秒数
      var seconds = Math.round(leave3 / 1000)
      let time = ''
      if (days) {
        time += days + '天'
      }
      if (hours) {
        time += hours + '小时'
      }
      if (minutes) {
        time += minutes + '分'
      }
      if (seconds) {
        time += seconds + '秒'
      }
      return time
    }
  }
}
</script>
